<template>
  <!-- 当点击设备时，触发 handleClick 方法 -->
  <div class="" @click="handleClick(devices)">
    <!-- 插槽，允许父组件传入内容，并提供 loading 状态 -->
    <slot v-bind="{ loading }" />
  </div>
</template>

<script setup>
// 导入 useShellAction 和 useTaskStore 自定义钩子
import { useShellAction } from '$/composables/useShellAction/index.js'
import { useTaskStore } from '$/store/index.js'

// 定义组件接收的属性
const props = defineProps({
  devices: {
    type: Object,
    default: () => null,
  },
})

// 使用 useShellAction 钩子处理壳命令操作
const { loading, invoke: handleClick } = useShellAction()

// 获取任务状态管理实例
const taskStore = useTaskStore()

// 监听 'shell' 任务事件，当有壳命令任务时，开始执行
taskStore.on('shell', (task) => {
  taskStore.start({
    task,
    handler: handleClick,
  })
})
</script>

<style></style>
